<script setup lang="tsx">
import { ref, reactive, onMounted } from 'vue'
import {
  ElCard,
  ElInput,
  ElSwitch,
  // ElDatePicker,
  ElButton,
  ElForm,
  ElFormItem,
  FormInstance,
  ElMessage
} from 'element-plus'
import { updateConditionApi, frequencyAllApi } from '@/api/dashboard/ticket'

const emits = defineEmits(['close'])
// const time1 = ref('')
// const time2 = ref('')
const ruleFormRef = ref<FormInstance>()
const saveLoading = ref(false)
const ruleForm = reactive({
  '1': {
    id: '1',
    fqType: 1,
    fqFrequency: '',
    fqConditionV1: '',
    offOn: 0
  },
  '2': {
    id: '2',
    fqType: 2,
    fqFrequency: '',
    fqConditionV1: '',
    offOn: 0
  },
  '3': {
    id: '3',
    fqType: 3,
    fqFrequency: '',
    fqConditionV1: '',
    offOn: 0
  },
  '4': {
    id: '4',
    fqType: 4,
    fqFrequency: '',
    fqConditionV1: '',
    offOn: 0
  }
})

onMounted(() => {
  frequencyAllApi().then((res) => {
    if (res.code != '200') return
    res.data.map((o) => {
      ruleForm[o.fqType] = o
    })
  })
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  saveLoading.value = true
  const res = await updateConditionApi(Object.values(ruleForm))
  emits('close')
  saveLoading.value = false
  if (res.code != '200') return
  ElMessage({
    message: '保存成功',
    type: 'success'
  })
}
</script>

<template>
  <el-form class="form-search-box" ref="ruleFormRef" :model="ruleForm">
    <el-card class="mt-3">
      <template #header>
        <div class="card-header">
          <span style="font-weight: 900; font-size: 20px">背书手数</span>
          <span style="color: #a2a2a2">(待签收状态下，背书超过配置的上限给出提示)</span>
        </div>
      </template>
      <div style="color: #a2a2a2" class="mb-2">累计背书不超过</div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <el-form-item>
            <el-input
              style="max-width: 240px"
              placeholder="累计背书"
              :disabled="ruleForm[1].offOn == 0"
              v-model.number="ruleForm[1].fqFrequency"
            >
              <template #append>手</template>
            </el-input>
          </el-form-item>
          <div class="ml-2" style="color: #a2a2a2"
            >(待签收状态下，累计背书手数超过配置的上限会给出提示)</div
          >
        </div>
        <div class="flex items-center">
          <el-form-item>
            <el-switch
              v-model="ruleForm[1].offOn"
              class="mr-2"
              :active-value="1"
              :inactive-value="0"
              style="--el-switch-on-color: #13ce66"
            />
            {{ ruleForm[1].offOn ? ' 已开启' : ' 已关闭' }}
          </el-form-item>
        </div>
      </div>
    </el-card>
    <el-card class="mt-3">
      <div style="color: #a2a2a2" class="mb-2">今日背书不超过</div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <el-form-item>
            <el-input
              v-model.number="ruleForm[2].fqFrequency"
              style="max-width: 240px"
              placeholder="背书手数"
              :disabled="ruleForm[2].offOn == 0"
            >
              <template #append>手</template>
            </el-input>
          </el-form-item>
          <div class="ml-2" style="color: #a2a2a2"
            >(待签收状态下，今日背书手数超过配置的上限会给出提示)</div
          >
        </div>
        <div class="flex items-center">
          <el-form-item>
            <el-switch
              v-model="ruleForm[2].offOn"
              class="mr-2"
              :active-value="1"
              :inactive-value="0"
              style="--el-switch-on-color: #13ce66"
            />
            {{ ruleForm[2].offOn ? ' 已开启' : ' 已关闭' }}
          </el-form-item>
        </div>
      </div>
    </el-card>
    <el-card class="mt-3">
      <div class="flex items-center justify-between">
        <div class="flex items-center flex-1">
          <div class="flex-1">
            <div style="color: #a2a2a2" class="mb-2">前</div>
            <div class="flex-1 flex items-center">
              <el-input
                v-model.number="ruleForm[3].fqConditionV1"
                style="max-width: 240px"
                placeholder="背书手数"
                :disabled="ruleForm[3].offOn == 0"
              >
                <template #append>天内</template>
              </el-input>
              <div class="ml-2" style="color: #a2a2a2">(不含今日，支持大于0的整数)</div>
            </div>
          </div>
          <div class="flex-1">
            <div style="color: #a2a2a2" class="mb-2">每日背书不超过</div>
            <el-input
              v-model.number="ruleForm[3].fqFrequency"
              style="max-width: 240px"
              placeholder="背书手数"
              :disabled="ruleForm[3].offOn == 0"
            >
              <template #append>手</template>
            </el-input>
          </div>
        </div>
        <div class="flex items-center">
          <el-form-item>
            <el-switch
              v-model="ruleForm[3].offOn"
              class="mr-2"
              :active-value="1"
              :inactive-value="0"
              style="--el-switch-on-color: #13ce66"
            />
            {{ ruleForm[3].offOn ? ' 已开启' : ' 已关闭' }}
          </el-form-item>
        </div>
      </div>
    </el-card>
    <!-- <el-card class="mt-3">
      <div class="flex items-center justify-between">
        <div class="flex items-center flex-1">
          <div>
            <div style="color: #a2a2a2" class="mb-2">选择日期</div>
            <div class="flex-1 flex items-center">
              <el-date-picker
                style="max-width: 140px"
                v-model="time1"
                type="datetime"
                placeholder="开始日期"
              />
              <span class="ml-2 mr-2">{{ ' 至 ' }}</span>
              <el-date-picker
                style="max-width: 140px"
                v-model="time2"
                type="datetime"
                placeholder="截止日期"
              />
              <div class="ml-2" style="color: #a2a2a2">(支持只设置开始日期或截止日期)</div>
            </div>
          </div>
          <div class="ml-10">
            <div style="color: #a2a2a2" class="mb-2">每日背书不超过</div>
            <el-input v-model="input" style="max-width: 240px" placeholder="背书手数">
              <template #append>手</template>
            </el-input>
          </div>
        </div>
        <div class="flex items-center">
          <el-switch v-model="switchValue" class="mr-2" style="--el-switch-on-color: #13ce66" />
          {{ switchValue ? ' 已开启' : ' 已关闭' }}
        </div>
      </div>
    </el-card> -->
    <el-card class="mt-3">
      <div style="color: #a2a2a2" class="mb-2">今日背书超过(含)</div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <el-form-item>
            <el-input
              style="max-width: 240px"
              placeholder="累计背书"
              :disabled="ruleForm[4].offOn == 0"
              v-model.number="ruleForm[4].fqFrequency"
            >
              <template #append>手</template>
            </el-input>
          </el-form-item>
          <div class="ml-2" style="color: #a2a2a2"
            >(待签收状态下，今日背书手数符合或超过此数值会给出提示，此指标不允许自定义修改)</div
          >
        </div>
        <div class="flex items-center">
          <el-form-item>
            <el-switch
              v-model="ruleForm[4].offOn"
              class="mr-2"
              :active-value="1"
              :inactive-value="0"
              style="--el-switch-on-color: #13ce66"
            />
            {{ ruleForm[4].offOn ? ' 已开启' : ' 已关闭' }}
          </el-form-item>
        </div>
      </div>
    </el-card>
    <div class="flex items-center justify-end mt-5">
      <ElButton @click="emits('close')"> 取消 </ElButton>
      <ElButton type="primary" :loading="saveLoading" @click="submitForm(ruleFormRef)">
        保存
      </ElButton>
    </div>
  </el-form>
</template>
